<!-- frontend/src/components/ActionDrawer.vue -->
<template>
    <el-drawer :model-value="visible" :title="title" :direction="direction" :size="size" @close="handleClose"
        destroy-on-close>
        <div class="drawer-body">
            <!-- 这里是抽屉的主要内容，比如表单 -->
            <slot></slot>
        </div>
        <div class="drawer-footer">
            <!-- 这里是抽屉的脚部，通常放按钮 -->
            <slot name="footer"></slot>
        </div>
    </el-drawer>
</template>

<script setup>
// import { defineProps, defineEmits } from 'vue';

// 定义这个组件可以接收哪些参数 (props)
defineProps({
    visible: { // 控制抽屉是否显示
        type: Boolean,
        required: true,
    },
    title: { // 抽屉的标题
        type: String,
        default: '操作',
    },
    direction: { // 抽屉滑出的方向
        type: String,
        default: 'rtl', // rtl = right-to-left 从右向左
    },
    size: { // 抽屉的宽度
        type: [String, Number],
        default: '40%',
    },
});

// 定义这个组件可以向父组件发送哪些事件
const emit = defineEmits(['close']);

// 当抽屉关闭时，通知父组件
const handleClose = () => {
    emit('close');
};
</script>

<style scoped>
.drawer-body {
    height: calc(100vh - 140px);
    /* 减去头部和脚部的大致高度 */
    padding: 20px;
    overflow-y: auto;
}

.drawer-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 20px;
    border-top: 1px solid var(--el-border-color);
    background: #fff;
    text-align: right;
}
</style>